<template>
    <div class="khname">
        <div class="fixedTop">
             <!-- <van-nav-bar class="back" title="开户行名称" left-text="返回" left-arrow @click-left="onClickLeft"/> -->
            <div class="tal_class_searchBox">
                <form action="/">
                    <van-search
                    placeholder="请输入要搜索的开户行名称"
                    background="#00CC66"
                    v-model="searchValue"
                    show-action
                    >
                    <div slot="action" @click="onSearch">搜索</div>
                    </van-search>
                </form>
            </div>
        </div>
        <!-- 渲染数据 -->
        <ul class="khh">
            <li v-for="(item,key) in khnameData" @click="selectKhName">{{item}}</li>
        </ul>
    </div>
</template>

<script>
import {
  NavBar,
  Search
} from "vant";
export default {
    data(){
       return {
           searchValue: "",
            khnameDataPar:["中国工商业银行股份有限公司长春全安广场支行", "中国农业股份有限公司银川宁煤中心分理处", "上海华瑞银行", "中囯建设银行股份有限公司常宁泉峰支行", "国家开发银行三亚市分行", "中国进出口银行", "中国农业发展银行", "交行丹阳分行新桥支行", "中信银行三明分行", "中国光大银行", "华夏银行上海分行", "中国民生股份有限公司宜昌分行营业部", "广发银行哈尔滨分行长江路支行", "平安银行", "招商银行", "兴业银行三明三元支行", "上海浦东发展银股份有限公司武汉青山支行", "北京银行", "天津银行", "河北银行股份有限公司", "唐山银行股份有限公司", "秦皇岛银行股份有限公司", "邯郸银行丛台东路支行", "邢台银行股份有限公司", "保定银行股份有限公司", "张家口银行股份有限公司", "承德银行股份有限公司", "沧州银行交通支行", "廊坊银行光明道支行", "衡水银行股份有限公司", "晋商银行股份有限公司", "大同银行股份有限公司", "阳泉市商业银行股份有限公司", "长治银行", "晋城银行", "晋中银行", "内蒙古银行呼和浩特中山路支行", "包商银行宁波分行营业部", "乌海银行股份有限公司", "鄂尔多斯银行股份有限公司", "盛京银行上海分行", "大连银行东海明珠支行", "鞍山银行股份有限公司", "抚顺银行七路支行", "本溪市商业银行股份有限公司", "丹东银行东港支行", "锦州银行(丹东市)凤城支行", "葫芦岛银行股份有限公司", "盖州市城市信用合作社", "营口沿海银行股份有限公司", "阜新银行不夜城支行", "辽阳银行", "铁岭银行股份有限公司", "朝阳银行兴盛支行", "吉林银行", "哈尔滨银行股份有限公司七台河分行", "龙江银行股份有限公司", "上海银行股份有限公司", "江苏银行股份有限公司", "南京银行东山支行", "江苏长江商业银行", "杭州银行深圳分行", "宁波银行南京中山北路支行", "宁波通商银行总行营业部集中作业中心", "温州银行上海浦东支行", "嘉兴银行股份有限公司东塔支行", "湖州银行股份有限公司", "绍兴银行股份有限公司万商路支行", "金华银行三江支行", "浙江稠州商业银行", "台州银行股份有限公司", "浙江泰隆商业银行临海大田小微企业专营支行", "浙江民泰商业银行股份有限公司", "福建海峡银行漳州分行财务会计部（不对外受理业务）", "厦门银行股份有限公司", "泉州银行股份有限公司", "景德镇市商业银行乐平洎阳支行", "九江银行三里街支行", "赣州银行股份有限公司", "上饶银行万年支行", "齐鲁银行", "青岛银行", "齐商银行", "枣庄银行股份有限公司", "东营银行股份有限公司", "烟台银行股份有限公司", "潍坊银行", "济宁银行股份有限公司", "泰安银行股份有限公司东平州城支行", "莱商银行", "威海市商业银行", "德州银行股份有限公司", "临商银行股份有限公司", "日照银行股份有限公司", "郑州银行", "中原银行股份有限公司", "洛阳银行股份有限公司", "平顶山银行股份有限公司", "焦作中旅银行股份有限公司科技支行", "湖北银行松滋小微企业支行"],
           khnameData:["中国工商业银行股份有限公司长春全安广场支行", "中国农业股份有限公司银川宁煤中心分理处", "上海华瑞银行", "中囯建设银行股份有限公司常宁泉峰支行", "国家开发银行三亚市分行", "中国进出口银行", "中国农业发展银行", "交行丹阳分行新桥支行", "中信银行三明分行", "中国光大银行", "华夏银行上海分行", "中国民生股份有限公司宜昌分行营业部", "广发银行哈尔滨分行长江路支行", "平安银行", "招商银行", "兴业银行三明三元支行", "上海浦东发展银股份有限公司武汉青山支行", "北京银行", "天津银行", "河北银行股份有限公司", "唐山银行股份有限公司", "秦皇岛银行股份有限公司", "邯郸银行丛台东路支行", "邢台银行股份有限公司", "保定银行股份有限公司", "张家口银行股份有限公司", "承德银行股份有限公司", "沧州银行交通支行", "廊坊银行光明道支行", "衡水银行股份有限公司", "晋商银行股份有限公司", "大同银行股份有限公司", "阳泉市商业银行股份有限公司", "长治银行", "晋城银行", "晋中银行", "内蒙古银行呼和浩特中山路支行", "包商银行宁波分行营业部", "乌海银行股份有限公司", "鄂尔多斯银行股份有限公司", "盛京银行上海分行", "大连银行东海明珠支行", "鞍山银行股份有限公司", "抚顺银行七路支行", "本溪市商业银行股份有限公司", "丹东银行东港支行", "锦州银行(丹东市)凤城支行", "葫芦岛银行股份有限公司", "盖州市城市信用合作社", "营口沿海银行股份有限公司", "阜新银行不夜城支行", "辽阳银行", "铁岭银行股份有限公司", "朝阳银行兴盛支行", "吉林银行", "哈尔滨银行股份有限公司七台河分行", "龙江银行股份有限公司", "上海银行股份有限公司", "江苏银行股份有限公司", "南京银行东山支行", "江苏长江商业银行", "杭州银行深圳分行", "宁波银行南京中山北路支行", "宁波通商银行总行营业部集中作业中心", "温州银行上海浦东支行", "嘉兴银行股份有限公司东塔支行", "湖州银行股份有限公司", "绍兴银行股份有限公司万商路支行", "金华银行三江支行", "浙江稠州商业银行", "台州银行股份有限公司", "浙江泰隆商业银行临海大田小微企业专营支行", "浙江民泰商业银行股份有限公司", "福建海峡银行漳州分行财务会计部（不对外受理业务）", "厦门银行股份有限公司", "泉州银行股份有限公司", "景德镇市商业银行乐平洎阳支行", "九江银行三里街支行", "赣州银行股份有限公司", "上饶银行万年支行", "齐鲁银行", "青岛银行", "齐商银行", "枣庄银行股份有限公司", "东营银行股份有限公司", "烟台银行股份有限公司", "潍坊银行", "济宁银行股份有限公司", "泰安银行股份有限公司东平州城支行", "莱商银行", "威海市商业银行", "德州银行股份有限公司", "临商银行股份有限公司", "日照银行股份有限公司", "郑州银行", "中原银行股份有限公司", "洛阳银行股份有限公司", "平顶山银行股份有限公司", "焦作中旅银行股份有限公司科技支行", "湖北银行松滋小微企业支行"],
       }
    },
    methods:{
        selectKhName(e){
            //选择开户银行名称
            //跳转回去
            this.$router.push({path:'/user/clean',query:{name:e.target.innerText}})

        },
        onClickLeft() {
            this.$router.go(-1);
        },
        onSearch(){
            //进行模糊搜索
            this.khnameData = [];
            this.khnameDataPar.forEach((item)=>{
                if (item.includes(this.searchValue)) {
                    this.khnameData.push(item)
                }
            })
        }
    },
    components:{
        [Search.name]: Search,
        [NavBar.name]: NavBar
    }
}
</script>

<style lang="scss" scoped>
.khname {
    .fixedTop {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    .back {
        color: white;
        background-color: $green;
    }
  }
     .tal_class_searchBox {
        width: 100%;
        position: relative;
    }
    .khh {
        background-color: #fff;
        padding: 44px 10px 5px 10px;
        box-sizing: border-box;
        li {
            padding: 12px 0;
            border-bottom: 1px solid #F1F1F1;
            &:last-child {
                border-bottom: none;
            }
        }
    }
}
   
</style>